<template>
  <PagePanel header="线柱图示例">
    <VisualDarkChart
      class="h-full"
      :loading="chartState.loading"
      :no-data="chartState.noData"
      :options="chartState.options"
    />
  </PagePanel>
</template>

<script lang="ts" setup>
import * as echarts from 'echarts'
import { PagePanel, VisualDarkChart } from '../components/index'

const chartState = reactive({
  loading: true,
  noData: false,
  options: {
    legend: {
      type: 'scroll',
      bottom: 0,
    },
    grid: {
      top: 30,
      right: 5,
      bottom: 5,
      left: 5,
      containLabel: true,
    },
    xAxis: {
      type: 'category',
      data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
    },
    yAxis: {
      type: 'value',
      name: 'YName',
    },
    series: [
      {
        type: 'pictorialBar',
        barWidth: 20,
        symbol: 'path://M35,0L35,70L0,70z M35,0L35,70L70,70z',
        itemStyle: {
          color: new echarts.graphic.LinearGradient(0, 0, 1, 0, [
            {
              offset: 0,
              color: '#173f9a',
            },
            {
              offset: 0.5,
              color: '#173f9a',
            },
            {
              offset: 0.5,
              color: '#247ed1',
            },
            {
              offset: 1,
              color: '#247ed1',
            },
          ]),
          opacity: 1,
        },
        data: [120, 200, 150, 80, 70, 110, 130],
      },
    ],
  },
})

setTimeout(() => {
  chartState.loading = false
  chartState.noData = false
}, 2000)
</script>
